<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>创建投票</title>
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<style type="text/css">
			body {
				width: 100%;
				height: 100%;
				font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
				user-select: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header class="xHeader" id="head">
				{{head}}
			</header>
			<form class="xForm" v-show="primary">
				<div>
					<label class="xInputTittle">投票名字</label>
					<label>
						<input class="xInput" type="text" v-model="name">
					</label>
					<p class="xPrompt">投票的名称</p>
					<div class="clapboard"></div>
				</div>
				<div>
					<label class="xInputTittle">描述</label>
					<label>
						<input class="xInput" type="text" v-model="description">
					</label>
					<p class="xPrompt">投票的描述</p>
					<div class="clapboard"></div>
				</div>
				<div>
					<label class="xInputTittle">选项</label><br />
					<label>
						<textarea v-model="choices" class="xInput" style="min-width: 100%;min-height: 80px;" :placeholder="css.choiceHoder"></textarea>
					</label>
					<p class="xPrompt">输入选项</p>
					<div class="clapboard"></div>
				</div>
				<div>
					<label class="xInputTittle">裁判</label><br />
					<label>
						<textarea v-model="judge" class="xInput" style="min-width: 100%;min-height: 80px;" :placeholder="css.judgeHoder"></textarea>
					</label>
					<p class="xPrompt">输入裁判</p>
					<div class="clapboard"></div>
				</div>
				<div style="width: 100%;height: fit-content;">
					<div style="width: 45%;float: left;">
						<label class="xInputTittle">裁判选票数</label>
						<label>
							<input class="xInput" type="number" v-model="option">
						</label>
						<p class="xPrompt">一个裁判的最大投票数</p>
						<div class="clapboard"></div>
					</div>
					<div style="width: 45%;float: right;">
						<label class="xInputTittle">晋级人数</label>
						<label>
							<input class="xInput" type="number" v-model="limit">
						</label>
						<p class="xPrompt">第一轮的晋级人数</p>
						<div class="clapboard"></div>
					</div>
				</div>
			</form>
			<form class="xForm" v-show="!primary">
				<div>
					<label class="xInputTittle">补充裁判</label><br />
					<label>
						<textarea class="xInput" style="min-width: 100%;min-height: 80px;" v-model="duplication"></textarea>
					</label>
					<p class="xPrompt">修正重名的裁判信息</p>
					<div class="clapboard"></div>
				</div>
			</form>
			<div style="width: 61.8%;margin: auto;margin-top: 100px;">
				<div class="xButton xLongButton" style="margin: 0" @mouseenter="menter" @mouseleave="mleave" @click="submit">
					<div class="centerText">{{css.buttonText}}</div>
				</div>
			</div>
		</div>
		<script type="application/javascript">
			const app = new Vue({
				el: "#app",
				data: {
					axGet: null,
					axPost: null,
					css: {
						mleavecolor: "#555555",
						mentercolor: "#3a3f4d",
						unknowErr: "未知错误, 请重新登录或联系管理员",
						loginAlert: "请先登录",
						choiceHoder: "请输入所有的选项, 一行一个选项.选项内容中不可使用除.,之外的特殊符号",
						judgeHoder: "请输入所有的选项, 一行一个裁判.裁判的账密用@隔开.账密中不可使用除.,之外的特殊符号",
						buttonText:"猛击创建>>",
						fixedButtonText:"立即修复",
						duplicated:"有重复名字的裁判, 请修改一呢."
					},
					head: "新的工作又开始了.",
					name: "新投票",
					description: "",
					choices: "",
					judge: "",
					option: 1,
					limit: 1,
					duplicationList:[],
					duplication:"",
					primary:true,
					turnId:null
				},
				methods: {
					primarySubmit:function(){
						this.axPost
							.post("/ballot/add", this.stringify({
									name: this.name,
									description: this.description,
									options: this.choices.replace(/\n/g, '*'),
									judge: this.judge.replace(/\n/g, '*'),
									option: this.option,
									limit: this.limit
								}), {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded',
									}
								})
							.then(resp=>{
								if(resp.data.status === false){
									if(resp.data.value === "login"){
										alert("请先登录")
										window.location.href = "index.html";
										return false;
									}
									if(resp.data.value === "full"){
										this.title = "你的投票拥有数已达到上限,请删除一个旧的投票后添加";
									}
									this.duplicationList = resp.data.value;
									this.turnId = this.duplicationList.pop();
									return false;
								}
								window.location.href = "info.html?id="+resp.data.value;
								return true;
							})
							.catch(err=>{
								    alert("请求错误, 请重新登录");
								    window.location.href = "index.html";
							})
					},
					fixSubmit:function(){
						this.axPost
							.post("/edit/addJudge", this.stringify({
									judge: this.duplication,
									turn: this.turnId
								}), {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded',
									}
								})
								.then(resp=>{
									if(resp.data.status === false){
										if(resp.data.value === "login"){
											alert("请先登录")
											window.location.href = "index.html";
											return false;
										}
										this.duplicationList = resp.data.value;
										this.turnId = this.duplicationList.pop();
										return false;
									}
									window.location.href = "info.html?id="+resp.data.value;
									return true;
								})
					},
					stringify: function(obj) {
						let res = "";
						for (pro in obj)
							res += "&" + pro + "=" + obj[pro];
						return res.substr(1);
					},
					menter: function(obj) {
						obj.currentTarget.style.backgroundColor = this.css.mentercolor;
					},
					mleave: function(obj) {
						obj.currentTarget.style.backgroundColor = this.css.mleavecolor;
					},
					submit: function() {
						if(this.primary){
							if(this.primarySubmit()) return;
						}else{
							if(this.fixSubmit()) return;
						}
						this.primary = false;
						this.buttonText = this.fixedButtonText;
						this.head = this.css.duplicated
						this.duplication = this.duplicationList.join("\n");
					}
				},
				created: function() {
					this.axGet = axios.create({
						url: "https://" + window.location.host,
						method: "get",
						responseType: 'json'
					});
					this.axPost = axios.create({
						url: "https://" + window.location.host,
						method: "post",
						responseType: "json",
						contentType: "application/x-www-form-urlencoded"
					});
					this.axGet
						.get("/captcha/login", {
							params: {}
						})
						.then(resp => {
							if (resp.data.status === false) {
								alert(this.css.loginAlert)
								window.location.href = "index.html";
							}
						})
						.catch(err => {
							window.location.href = "index.html";
						});
				}
			});
		</script>
	</body>
</html>
